<template>
    <div class="app-container">
      <wise-crud ref="wise-crud" :urls="urls" :fields="fields" :handle="handle" :filters="filters">
       
      </wise-crud>
    </div>
  </template>
  <script>
    import WiseCrud from '@/components/Crud/wiseCrud'
    import {
      postHandle
    } from '@/api'
    export default {
      name: 'GatewayManage',
      components: {
        WiseCrud
      },
      data() {
        return {
          urls: {
            list: '/api/v1/welder-sbtx-second/gateway-comb/list',
            add: '/api/v1/welder-sbtx-second/gateway-comb/create',
            show: '/api/v1/welder-sbtx-second/gateway-comb/show/',
            update: '/api/v1/welder-sbtx-second/gateway-comb/update/',
            delete: '/api/v1/welder-sbtx-second/gateway-comb/remove/',
          export: '/api/v1/welder-sbtx-second/gateway-comb/export/'
          },
          gatcardType: [{
            name: '123',
            value: 1
          }]
        }
      },
      computed: {
        spaceId() {
          return this.$store.getters.entSpaceId
        },
        handle() {
          
          return ['add', 'search', 'filters','export','import']
        },
        fields() {
          let arr = [{
            label: '序号',
            type: 'index',
            use: ['table']
          }]
          arr.push({
              label: '网关类型',
              prop: 'type',
              type: 'radio',
              dataDic: 'gatewayType',
              labelWidth: '130px',
              rules: [{
                required: true,
                message: '请选择网关类型',
                trigger: 'change'
              }],
              use: ['table', 'add', 'view', 'edit', 'search']
            }, {
              label: '网关名称',
              prop: 'name',
              type: 'text',
              labelWidth: '130px',
              rules: [{
                required: true,
                message: '请输入网关名称',
                trigger: 'change'
              }],
              placeholder: '请输入网关名称',
              use: ['table', 'add', 'view', 'edit', 'search']
            }, {
              label: '卡号',
              prop: 'cardNum',
              type: 'text',
              labelWidth: '130px',
              rules: [{
                required: true,
                message: '请输入卡号',
                trigger: 'change'
              }],
              placeholder: '请输入卡号',
              use: ['table', 'add', 'view', 'edit', 'search']
            }, {
              label: '网关编号',
              prop: 'gatewayCode',
              type: 'text',
              labelWidth: '130px',
              rules: [{
                required: true,
                message: '请输入网关编号',
                trigger: 'change'
              }],
              placeholder: '请输入网关编号',
              use: ['table', 'add', 'view', 'edit', 'search']
            }, {
              label: '网关卡号',
              prop: 'cardType',
              type: 'radio',
              dataDic: 'getCardType',
              labelWidth: '130px',
              rules: [{
                required: true,
                message: '请选择网关类型',
                trigger: 'change'
              }],
              use: ['table', 'add', 'view', 'edit', 'search']
            },
  
            {
              label: '大屏展示',
              prop: 'manage',
              type: 'render',
              labelWidth: '130px',
              tableRender: (h, row, index) => {
                return h('el-switch', {
                  props: {
                    value: row.showStates,
                    activeValue: 1,
                    inactiveValue: 0
                  },
                  on: {
                    change: (value) => {
                      if (value === 1) {
                        this.startHandle(row)
                      } else {
                        this.finishHandle(row)
                      }
                    }
                  }
                })
              },
              viewRender: (h, item, object) => {
                return h('div', object.showStates ? '是' : '否')
              },
              use: ['table', 'view']
            }, {
              prop: 'entSpaceId',
              defaultValue: this.$store.getters.entSpaceId,
              use: ['add', 'edit']
            }
          )
          arr.push({
            label: '操作',
            type: 'handle',
            use: ['table'],
            handle: [ 'view' ],
            tableWidth: 300
          })
          return arr
        },
        filters() {
          return [{
            field: 'entSpaceId',
            operator: 'EQUALS',
            value: this.$store.getters.entSpaceId
          }]
        }
      },
      methods: {
        startHandle(row) {
          this.$confirm('大屏是否展示?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            .then(() => {
              row.showStates = 1
              this.updateStatus(row)
              this.$message({
                type: 'success',
                message: '大屏展示成功!'
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              })
            })
        },
        finishHandle(row) {
          this.$confirm('是否取消大屏展示?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            .then(() => {
              row.showStates = 0
              this.updateStatus(row)
              this.$message({
                type: 'success',
                message: '取消展示成功!'
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消'
              })
            })
        },
        updateStatus(obj) {
          postHandle(this.urls.update + obj.id, {
            d: {},
            obj
          }).then((response) => {
            this.object = response.result
          })
        }
      }
    }
  </script>
  
  <style>
  </style>